<template>
  <div>
    <div id="container" :style="{ height: 'calc(100vh - ' + 0 + 'px)' }"></div>
    <el-input
      class="input-search"
      placeholder="请选择作业车辆"
      prefix-icon="el-icon-search"
      @keyup.enter.native="handleSearch"
      v-model="searchVehicle"
    >
    </el-input>
    <el-button
      type="primary"
      plain
      class="exit-bottom"
      v-show="monitorStatus"
      @click="exitMonitor"
      >退出监控</el-button
    >
    <el-form class="videoPlays" layout="inline">
      <template>
        <el-card class="box-card" v-if="showVideos">
          <div>
            <videoPlayer
              class="vjs-custom-skin videoPlayer"
              :options="playerOptions1"
            ></videoPlayer>
          </div>
          <el-divider></el-divider>
          <div>
            <videoPlayer
              class="vjs-custom-skin videoPlayer"
              :options="playerOptions2"
            ></videoPlayer>
          </div>
        </el-card>
        <el-card class="box-card" v-show="showInfo" style="">
          <div>
            <el-row :gutter="0">
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span>车牌号：{{ selectedVehicle }}</span>
                </div></el-col
              >
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span>状态：{{ engineState }}</span>
                </div></el-col
              >
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span>车速：{{ speed }}</span>
                </div></el-col
              >
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span>时间：{{ sampleTime }}</span>
                </div></el-col
              >
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span style="">经纬度：{{ longAndLat }}</span>
                </div></el-col
              >
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span>行驶里程：{{ mileage }}</span>
                </div></el-col
              >
              <el-col :span="24"
                ><div class="grid-content bg-purple">
                  <span>地址：{{ address }}</span>
                </div></el-col
              >
            </el-row>
          </div>
        </el-card>
      </template>
    </el-form>
    <el-card class="job-look" v-show="jobLookStatus">
      <div>
        <p>作业看板</p>
        <el-divider></el-divider>
        <el-row :gutter="10">
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <span class="font-style">作业车辆：</span>
              <span class="link-type">{{ jobVehicleNum }}</span>
            </div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="10">
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <span class="font-style">作业任务：</span>
              <span class="link-type">{{ jobNum }}</span>
            </div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="10">
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <span class="font-style">作业完成率：</span>
              <span class="link-type">{{ jobCompletion }}</span>
            </div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="10">
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <span class="font-style">作业速率：</span>
              <span class="link-type">{{ jobSpeed }}</span>
            </div></el-col
          >
        </el-row>
      </div>
    </el-card>
    <el-card class="vehicle-icon" v-show="vehicleIconStatus">
      <div>
        <el-row :gutter="10" class="hhh">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-image style="width: 22px" :src="markerIcon"></el-image></div
          ></el-col>
          <el-col :span="16"
            ><div class="grid-content bg-purple">
              <span class="font-style">正常车辆</span>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8"
            ><div class="grid-content bg-purple">
              <el-image
                style="width: 22px"
                :src="faultMarkerIcon"
              ></el-image></div
          ></el-col>

          <el-col :span="16"
            ><div class="grid-content bg-purple">
              <span class="font-style">异常车辆</span>
            </div></el-col
          >
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
import markerIcon from "@/icons/png/作业车辆.png";
import faultMarkerIcon from "@/icons/png/故障车辆.png";
import noWorkIcon from "@/icons/png/未作业车辆.png";
import { pathIssued, vehicleControl, videoAudioRequest } from "@/api/demo";
import { inquireVehicle } from "@/api/vehicles";
import { getConnectInfo } from "@/api/socket";
import { inquireJobArea } from "@/api/operationalPlanning";
import { Message } from "element-ui";
import { gps84ToGcj02, carPathData, sanitationPathData } from "@/utils/tool";
import loadFile from "@/utils/getFiles";

import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import "videojs-flash";
import "video.js/dist/video-js.css"; // 引入样式
import "vue-video-player/src/custom-theme.css"; // 引入样式
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      map: null,
      markerList: {},
      infoWindows: {},
      //作业看板数据
      //作业车辆数
      jobVehicleNum: "",
      //作业数
      jobNum: "",
      //作业完成率
      jobCompletion: "",
      //作业速率
      jobSpeed: "",
      //信息窗体
      infoWindow: null,
      vehicleLocation: {},
      jobLookStatus: true,
      vehicleIconStatus: true,
      monitorStatus: false,
      //searchVehicle
      searchVehicle: "",
      //当前选中的车辆
      selectedVehicle: "",
      //发动机状态
      engineState: "",
      //时速
      speed: "",
      //方向
      direction: "",
      //时间
      sampleTime: "",
      //经纬度
      longAndLat: "",
      //里程
      mileage: "",
      //位置
      address: "",

      markerIcon,
      faultMarkerIcon,

      //播放器相关
      playerOptions1: {
        height: "200",
        sources: [
          {
            type: "rtmp/flv",
            src: "rtmp://58.200.131.2:1935/livetv/hunantv"
          }
        ],
        techOrder: ["flash"],
        autoplay: true,
        controls: true,
        preload: "auto", //视频预加载
        aspectRatio: "16:9"
      },
      playerOptions2: {
        height: "200",
        sources: [
          {
            type: "rtmp/flv",
            src: "rtmp://58.200.131.2:1935/livetv/cctv6"
          }
        ],
        techOrder: ["flash"],
        autoplay: true,
        controls: true,
        preload: "auto", //视频预加载
        aspectRatio: "16:9"
      },

      //socket相关
      socketPath: "",
      socket: "",
      vehicles: [],
      clientID: "",
      showVideos: false,
      showInfo: false,
      dialogTableVisible: false,
      jobArealist: [],
      //小巴车路径
      carPath: null,
      sanitationPath: null,
      polyline: [],
      realTimer: "",
      jobArea:[{lng:109.004629, lat:34.472782}, {lng:109.008083, lat:34.472989}, {lng:109.008341, lat:34.470783}, {lng:109.004854, lat:34.470544}, {lng:109.004854, lat:34.470544}],
      jobLine:[{"lng":"109.001390000","lat":"34.472890200"},{"lng":"109.001390400","lat":"34.472887800"},{"lng":"109.001391100","lat":"34.472883700"},{"lng":"109.001392100","lat":"34.472877400"},{"lng":"109.001393400","lat":"34.472869200"},{"lng":"109.001395200","lat":"34.472859400"},{"lng":"109.001397100","lat":"34.472847800"},{"lng":"109.001399600","lat":"34.472835000"},{"lng":"109.001402900","lat":"34.472821400"},{"lng":"109.001407200","lat":"34.472807600"},{"lng":"109.001412900","lat":"34.472793600"},{"lng":"109.001419800","lat":"34.472780200"},{"lng":"109.001427200","lat":"34.472768000"},{"lng":"109.001434700","lat":"34.472757400"},{"lng":"109.001443300","lat":"34.472747000"},{"lng":"109.001452800","lat":"34.472737100"},{"lng":"109.001462600","lat":"34.472727800"},{"lng":"109.001473100","lat":"34.472719100"},{"lng":"109.001483900","lat":"34.472710900"},{"lng":"109.001494100","lat":"34.472703400"},{"lng":"109.001503100","lat":"34.472697100"},{"lng":"109.001512300","lat":"34.472690500"},{"lng":"109.001521500","lat":"34.472683500"},{"lng":"109.001529800","lat":"34.472676700"},{"lng":"109.001536800","lat":"34.472670200"},{"lng":"109.001543700","lat":"34.472662800"},{"lng":"109.001550500","lat":"34.472654000"},{"lng":"109.001556500","lat":"34.472643900"},{"lng":"109.001561400","lat":"34.472632800"},{"lng":"109.001565100","lat":"34.472621000"},{"lng":"109.001567700","lat":"34.472608600"},{"lng":"109.001569600","lat":"34.472595800"},{"lng":"109.001571200","lat":"34.472582900"},{"lng":"109.001572500","lat":"34.472570100"},{"lng":"109.001573700","lat":"34.472557700"},{"lng":"109.001575000","lat":"34.472544300"},{"lng":"109.001576600","lat":"34.472528400"},{"lng":"109.001578300","lat":"34.472510600"},{"lng":"109.001580100","lat":"34.472491800"},{"lng":"109.001581900","lat":"34.472473100"},{"lng":"109.001583600","lat":"34.472455300"},{"lng":"109.001585200","lat":"34.472439000"},{"lng":"109.001586900","lat":"34.472422200"},{"lng":"109.001588700","lat":"34.472404400"},{"lng":"109.001590500","lat":"34.472386300"},{"lng":"109.001592300","lat":"34.472368800"},{"lng":"109.001594000","lat":"34.472352700"},{"lng":"109.001595600","lat":"34.472337600"},{"lng":"109.001597200","lat":"34.472321600"},{"lng":"109.001598700","lat":"34.472304300"},{"lng":"109.001599600","lat":"34.472286500"},{"lng":"109.001599400","lat":"34.472268500"},{"lng":"109.001597900","lat":"34.472250400"},{"lng":"109.001594700","lat":"34.472232400"},{"lng":"109.001589800","lat":"34.472214800"},{"lng":"109.001583300","lat":"34.472198200"},{"lng":"109.001575600","lat":"34.472183500"},{"lng":"109.001567000","lat":"34.472171300"},{"lng":"109.001557200","lat":"34.472159900"},{"lng":"109.001545300","lat":"34.472148300"},{"lng":"109.001531200","lat":"34.472137400"},{"lng":"109.001515200","lat":"34.472127400"},{"lng":"109.001497400","lat":"34.472118900"},{"lng":"109.001478700","lat":"34.472112100"},{"lng":"109.001459100","lat":"34.472106900"},{"lng":"109.001438900","lat":"34.472103200"},{"lng":"109.001418500","lat":"34.472100400"},{"lng":"109.001397800","lat":"34.472098300"},{"lng":"109.001377000","lat":"34.472096700"},{"lng":"109.001355900","lat":"34.472095300"},{"lng":"109.001333800","lat":"34.472093800"},{"lng":"109.001310500","lat":"34.472092100"},{"lng":"109.001286300","lat":"34.472090400"},{"lng":"109.001261300","lat":"34.472088700"},{"lng":"109.001235900","lat":"34.472087000"},{"lng":"109.001210400","lat":"34.472085200"},{"lng":"109.001184700","lat":"34.472083500"},{"lng":"109.001159000","lat":"34.472081800"},{"lng":"109.001133000","lat":"34.472080200"},{"lng":"109.001106900","lat":"34.472078500"},{"lng":"109.001080500","lat":"34.472076900"},{"lng":"109.001053900","lat":"34.472075200"},{"lng":"109.001027000","lat":"34.472073500"},{"lng":"109.001000100","lat":"34.472071900"},{"lng":"109.000973300","lat":"34.472070300"},{"lng":"109.000946500","lat":"34.472068400"},{"lng":"109.000919600","lat":"34.472066500"},{"lng":"109.000892500","lat":"34.472064600"},{"lng":"109.000865200","lat":"34.472062700"},{"lng":"109.000837600","lat":"34.472060700"},{"lng":"109.000810100","lat":"34.472058700"},{"lng":"109.000782400","lat":"34.472056700"},{"lng":"109.000754600","lat":"34.472054500"},{"lng":"109.000726400","lat":"34.472052400"},{"lng":"109.000698000","lat":"34.472050200"},{"lng":"109.000669600","lat":"34.472048000"},{"lng":"109.000640900","lat":"34.472045700"},{"lng":"109.000612200","lat":"34.472043500"},{"lng":"109.000583400","lat":"34.472041300"},{"lng":"109.000555200","lat":"34.472039200"},{"lng":"109.000528600","lat":"34.472037400"},{"lng":"109.000502700","lat":"34.472035500"},{"lng":"109.000476000","lat":"34.472033700"},{"lng":"109.000448700","lat":"34.472031900"},{"lng":"109.000421400","lat":"34.472030100"},{"lng":"109.000394000","lat":"34.472028400"},{"lng":"109.000367900","lat":"34.472026600"},{"lng":"109.000343200","lat":"34.472025000"},{"lng":"109.000318700","lat":"34.472023300"},{"lng":"109.000293700","lat":"34.472021600"},{"lng":"109.000268900","lat":"34.472019900"},{"lng":"109.000243900","lat":"34.472018200"},{"lng":"109.000220100","lat":"34.472016600"},{"lng":"109.000197800","lat":"34.472015100"},{"lng":"109.000177100","lat":"34.472013700"},{"lng":"109.000156300","lat":"34.472012300"},{"lng":"109.000135800","lat":"34.472011100"},{"lng":"109.000117000","lat":"34.472010700"},{"lng":"109.000099700","lat":"34.472011400"},{"lng":"109.000082200","lat":"34.472013400"},{"lng":"109.000064700","lat":"34.472017200"},{"lng":"109.000048000","lat":"34.472022800"},{"lng":"109.000031700","lat":"34.472030200"},{"lng":"109.000016000","lat":"34.472039800"},{"lng":"109.000002100","lat":"34.472050600"},{"lng":"108.999990300","lat":"34.472062500"},{"lng":"108.999980300","lat":"34.472075700"},{"lng":"108.999971400","lat":"34.472090000"},{"lng":"108.999964200","lat":"34.472105000"},{"lng":"108.999958400","lat":"34.472120400"},{"lng":"108.999953700","lat":"34.472135700"},{"lng":"108.999950100","lat":"34.472151000"},{"lng":"108.999947400","lat":"34.472166400"},{"lng":"108.999945200","lat":"34.472181700"},{"lng":"108.999943400","lat":"34.472195700"},{"lng":"108.999941900","lat":"34.472207100"},{"lng":"108.999940800","lat":"34.472216100"},{"lng":"108.999939800","lat":"34.472223100"},{"lng":"108.999939300","lat":"34.472227700"},{"lng":"108.999938900","lat":"34.472231000"},{"lng":"108.999938200","lat":"34.472235500"},{"lng":"108.999937500","lat":"34.472241800"},{"lng":"108.999936600","lat":"34.472249100"},{"lng":"108.999935300","lat":"34.472257700"},{"lng":"108.999934100","lat":"34.472267100"},{"lng":"108.999932900","lat":"34.472277600"},{"lng":"108.999931400","lat":"34.472288700"},{"lng":"108.999930100","lat":"34.472301000"},{"lng":"108.999928800","lat":"34.472313400"},{"lng":"108.999927500","lat":"34.472325900"},{"lng":"108.999926200","lat":"34.472339000"},{"lng":"108.999924700","lat":"34.472352200"},{"lng":"108.999923300","lat":"34.472366000"},{"lng":"108.999922100","lat":"34.472380300"},{"lng":"108.999920600","lat":"34.472395300"},{"lng":"108.999919100","lat":"34.472410700"},{"lng":"108.999917400","lat":"34.472426700"},{"lng":"108.999915800","lat":"34.472443300"},{"lng":"108.999914200","lat":"34.472460100"},{"lng":"108.999912600","lat":"34.472477200"},{"lng":"108.999910900","lat":"34.472494700"},{"lng":"108.999909300","lat":"34.472512200"},{"lng":"108.999907700","lat":"34.472529800"},{"lng":"108.999906200","lat":"34.472547500"},{"lng":"108.999904800","lat":"34.472565700"},{"lng":"108.999903200","lat":"34.472583700"},{"lng":"108.999901400","lat":"34.472602000"},{"lng":"108.999899800","lat":"34.472620300"},{"lng":"108.999898200","lat":"34.472638300"},{"lng":"108.999896600","lat":"34.472655200"},{"lng":"108.999895300","lat":"34.472671200"},{"lng":"108.999893600","lat":"34.472688200"},{"lng":"108.999892100","lat":"34.472705600"},{"lng":"108.999890500","lat":"34.472723400"},{"lng":"108.999888800","lat":"34.472741700"},{"lng":"108.999887200","lat":"34.472760600"},{"lng":"108.999885100","lat":"34.472780000"},{"lng":"108.999883100","lat":"34.472799700"},{"lng":"108.999880900","lat":"34.472819700"},{"lng":"108.999878500","lat":"34.472839800"},{"lng":"108.999875900","lat":"34.472859800"},{"lng":"108.999873900","lat":"34.472879800"},{"lng":"108.999871600","lat":"34.472898500"},{"lng":"108.999869700","lat":"34.472915100"},{"lng":"108.999867900","lat":"34.472929400"},{"lng":"108.999866300","lat":"34.472943000"},{"lng":"108.999865000","lat":"34.472955700"},{"lng":"108.999863600","lat":"34.472967000"},{"lng":"108.999862400","lat":"34.472977500"},{"lng":"108.999861300","lat":"34.472988000"},{"lng":"108.999860100","lat":"34.472997300"},{"lng":"108.999859200","lat":"34.473005000"},{"lng":"108.999858500","lat":"34.473011900"},{"lng":"108.999857300","lat":"34.473020400"},{"lng":"108.999856100","lat":"34.473032200"},{"lng":"108.999854200","lat":"34.473047000"},{"lng":"108.999852300","lat":"34.473064200"},{"lng":"108.999850400","lat":"34.473082900"},{"lng":"108.999848400","lat":"34.473103300"},{"lng":"108.999846300","lat":"34.473124800"},{"lng":"108.999843900","lat":"34.473147300"},{"lng":"108.999841800","lat":"34.473170100"},{"lng":"108.999839600","lat":"34.473193100"},{"lng":"108.999837300","lat":"34.473216500"},{"lng":"108.999835200","lat":"34.473239900"},{"lng":"108.999833100","lat":"34.473263500"},{"lng":"108.999831400","lat":"34.473287500"},{"lng":"108.999829200","lat":"34.473311500"},{"lng":"108.999827000","lat":"34.473335500"},{"lng":"108.999825000","lat":"34.473359200"},{"lng":"108.999822600","lat":"34.473382800"},{"lng":"108.999820100","lat":"34.473406200"},{"lng":"108.999817500","lat":"34.473429600"},{"lng":"108.999815100","lat":"34.473453000"},{"lng":"108.999812500","lat":"34.473475900"},{"lng":"108.999810400","lat":"34.473497600"},{"lng":"108.999808000","lat":"34.473517600"},{"lng":"108.999805800","lat":"34.473537700"},{"lng":"108.999803600","lat":"34.473558300"},{"lng":"108.999801400","lat":"34.473579300"},{"lng":"108.999799400","lat":"34.473600400"},{"lng":"108.999797300","lat":"34.473621800"},{"lng":"108.999795200","lat":"34.473642500"},{"lng":"108.999793400","lat":"34.473662100"},{"lng":"108.999791400","lat":"34.473681100"},{"lng":"108.999789600","lat":"34.473700600"},{"lng":"108.999787700","lat":"34.473720700"},{"lng":"108.999785900","lat":"34.473740700"},{"lng":"108.999784100","lat":"34.473759800"},{"lng":"108.999782300","lat":"34.473777200"},{"lng":"108.999780800","lat":"34.473794200"},{"lng":"108.999779400","lat":"34.473811100"},{"lng":"108.999777600","lat":"34.473827900"},{"lng":"108.999776100","lat":"34.473843900"},{"lng":"108.999775000","lat":"34.473858700"},{"lng":"108.999773800","lat":"34.473874400"},{"lng":"108.999772900","lat":"34.473890500"},{"lng":"108.999773300","lat":"34.473907000"},{"lng":"108.999775000","lat":"34.473923600"},{"lng":"108.999778700","lat":"34.473940200"},{"lng":"108.999784400","lat":"34.473956300"},{"lng":"108.999792500","lat":"34.473971400"},{"lng":"108.999803000","lat":"34.473985600"},{"lng":"108.999815400","lat":"34.473998900"},{"lng":"108.999830000","lat":"34.474010800"},{"lng":"108.999846200","lat":"34.474021100"},{"lng":"108.999864400","lat":"34.474029300"},{"lng":"108.999883500","lat":"34.474035500"},{"lng":"108.999903400","lat":"34.474039900"},{"lng":"108.999923800","lat":"34.474043000"},{"lng":"108.999944600","lat":"34.474045000"},{"lng":"108.999965600","lat":"34.474046500"},{"lng":"108.999986700","lat":"34.474047600"},{"lng":"109.000008100","lat":"34.474049200"},{"lng":"109.000029900","lat":"34.474050600"},{"lng":"109.000052500","lat":"34.474051900"},{"lng":"109.000075900","lat":"34.474053800"},{"lng":"109.000099600","lat":"34.474055500"},{"lng":"109.000124200","lat":"34.474057200"},{"lng":"109.000149200","lat":"34.474059200"},{"lng":"109.000174400","lat":"34.474061300"},{"lng":"109.000200400","lat":"34.474063400"},{"lng":"109.000226900","lat":"34.474065800"},{"lng":"109.000253500","lat":"34.474067900"},{"lng":"109.000280600","lat":"34.474069800"},{"lng":"109.000308000","lat":"34.474071500"},{"lng":"109.000335700","lat":"34.474073100"},{"lng":"109.000363700","lat":"34.474074800"},{"lng":"109.000391800","lat":"34.474077000"},{"lng":"109.000420200","lat":"34.474079200"},{"lng":"109.000449100","lat":"34.474081400"},{"lng":"109.000477700","lat":"34.474083400"},{"lng":"109.000506400","lat":"34.474085900"},{"lng":"109.000534900","lat":"34.474088400"},{"lng":"109.000563300","lat":"34.474090600"},{"lng":"109.000591500","lat":"34.474093000"},{"lng":"109.000619700","lat":"34.474095700"},{"lng":"109.000647500","lat":"34.474098000"},{"lng":"109.000675300","lat":"34.474100800"},{"lng":"109.000702800","lat":"34.474103200"},{"lng":"109.000730400","lat":"34.474105400"},{"lng":"109.000758000","lat":"34.474107600"},{"lng":"109.000785300","lat":"34.474109900"},{"lng":"109.000812400","lat":"34.474112200"},{"lng":"109.000839500","lat":"34.474114200"},{"lng":"109.000866600","lat":"34.474116000"},{"lng":"109.000893800","lat":"34.474117800"},{"lng":"109.000920900","lat":"34.474119800"},{"lng":"109.000947900","lat":"34.474121400"},{"lng":"109.000974800","lat":"34.474123300"},{"lng":"109.001001700","lat":"34.474125600"},{"lng":"109.001028300","lat":"34.474127400"},{"lng":"109.001054900","lat":"34.474129500"},{"lng":"109.001081300","lat":"34.474131600"},{"lng":"109.001108100","lat":"34.474133500"},{"lng":"109.001135200","lat":"34.474135400"},{"lng":"109.001162400","lat":"34.474137100"},{"lng":"109.001189600","lat":"34.474138800"},{"lng":"109.001217000","lat":"34.474140600"},{"lng":"109.001244200","lat":"34.474142400"},{"lng":"109.001271500","lat":"34.474144200"},{"lng":"109.001298700","lat":"34.474145800"},{"lng":"109.001326000","lat":"34.474147300"},{"lng":"109.001353400","lat":"34.474149100"},{"lng":"109.001380800","lat":"34.474150900"},{"lng":"109.001408300","lat":"34.474152800"},{"lng":"109.001435800","lat":"34.474154800"},{"lng":"109.001463800","lat":"34.474157000"},{"lng":"109.001491800","lat":"34.474159100"},{"lng":"109.001520000","lat":"34.474161200"},{"lng":"109.001548200","lat":"34.474163100"},{"lng":"109.001576500","lat":"34.474164900"},{"lng":"109.001604800","lat":"34.474166600"},{"lng":"109.001633100","lat":"34.474168500"},{"lng":"109.001661700","lat":"34.474170300"},{"lng":"109.001690200","lat":"34.474172400"},{"lng":"109.001718900","lat":"34.474174500"},{"lng":"109.001748400","lat":"34.474176500"},{"lng":"109.001778400","lat":"34.474178500"},{"lng":"109.001808900","lat":"34.474180700"},{"lng":"109.001840000","lat":"34.474183000"},{"lng":"109.001871900","lat":"34.474185400"},{"lng":"109.001904100","lat":"34.474187600"},{"lng":"109.001936500","lat":"34.474189700"},{"lng":"109.001969300","lat":"34.474191900"},{"lng":"109.002002200","lat":"34.474193900"},{"lng":"109.002034800","lat":"34.474195900"},{"lng":"109.002067200","lat":"34.474197900"},{"lng":"109.002098100","lat":"34.474199800"},{"lng":"109.002127800","lat":"34.474201700"},{"lng":"109.002157800","lat":"34.474203400"},{"lng":"109.002189000","lat":"34.474205500"},{"lng":"109.002220800","lat":"34.474207400"},{"lng":"109.002252800","lat":"34.474209400"},{"lng":"109.002285000","lat":"34.474211500"},{"lng":"109.002317200","lat":"34.474213500"},{"lng":"109.002349200","lat":"34.474215700"},{"lng":"109.002381000","lat":"34.474217600"},{"lng":"109.002411600","lat":"34.474219800"},{"lng":"109.002440100","lat":"34.474221900"},{"lng":"109.002468100","lat":"34.474224000"},{"lng":"109.002496300","lat":"34.474225800"},{"lng":"109.002524300","lat":"34.474227700"},{"lng":"109.002551700","lat":"34.474229700"},{"lng":"109.002577500","lat":"34.474231500"},{"lng":"109.002602900","lat":"34.474233000"},{"lng":"109.002628600","lat":"34.474234500"},{"lng":"109.002654000","lat":"34.474236000"},{"lng":"109.002679500","lat":"34.474237500"},{"lng":"109.002704900","lat":"34.474238800"},{"lng":"109.002729600","lat":"34.474240000"},{"lng":"109.002752700","lat":"34.474241400"},{"lng":"109.002775300","lat":"34.474242000"},{"lng":"109.002798700","lat":"34.474242200"},{"lng":"109.002821600","lat":"34.474241400"},{"lng":"109.002844300","lat":"34.474239700"},{"lng":"109.002866900","lat":"34.474236400"},{"lng":"109.002888600","lat":"34.474231500"},{"lng":"109.002908100","lat":"34.474225100"},{"lng":"109.002925100","lat":"34.474217500"},{"lng":"109.002941300","lat":"34.474208100"},{"lng":"109.002956300","lat":"34.474196700"},{"lng":"109.002969500","lat":"34.474183500"},{"lng":"109.002980500","lat":"34.474168400"},{"lng":"109.002988600","lat":"34.474152000"},{"lng":"109.002993700","lat":"34.474134500"},{"lng":"109.002996800","lat":"34.474116100"},{"lng":"109.002998300","lat":"34.474097400"},{"lng":"109.002999200","lat":"34.474078400"},{"lng":"109.003000200","lat":"34.474059200"},{"lng":"109.003001400","lat":"34.474039400"},{"lng":"109.003002800","lat":"34.474019100"},{"lng":"109.003004100","lat":"34.473998700"},{"lng":"109.003005700","lat":"34.473978000"},{"lng":"109.003007500","lat":"34.473957000"},{"lng":"109.003009300","lat":"34.473936100"},{"lng":"109.003011200","lat":"34.473915200"},{"lng":"109.003012900","lat":"34.473895600"},{"lng":"109.003014500","lat":"34.473876800"},{"lng":"109.003016200","lat":"34.473857700"},{"lng":"109.003018100","lat":"34.473838300"},{"lng":"109.003020000","lat":"34.473818400"},{"lng":"109.003021800","lat":"34.473798300"},{"lng":"109.003023800","lat":"34.473777600"},{"lng":"109.003025600","lat":"34.473756800"},{"lng":"109.003027600","lat":"34.473735500"},{"lng":"109.003029300","lat":"34.473714300"},{"lng":"109.003031000","lat":"34.473693000"},{"lng":"109.003032700","lat":"34.473671700"},{"lng":"109.003034500","lat":"34.473650000"},{"lng":"109.003036400","lat":"34.473628500"},{"lng":"109.003038300","lat":"34.473607100"},{"lng":"109.003040200","lat":"34.473585500"},{"lng":"109.003042100","lat":"34.473564100"},{"lng":"109.003043900","lat":"34.473543400"},{"lng":"109.003045600","lat":"34.473523000"},{"lng":"109.003047500","lat":"34.473501900"},{"lng":"109.003050000","lat":"34.473480200"},{"lng":"109.003052700","lat":"34.473457800"},{"lng":"109.003054700","lat":"34.473435200"},{"lng":"109.003057000","lat":"34.473412500"},{"lng":"109.003059000","lat":"34.473389600"},{"lng":"109.003061300","lat":"34.473366100"},{"lng":"109.003063600","lat":"34.473342400"},{"lng":"109.003065900","lat":"34.473318600"},{"lng":"109.003068100","lat":"34.473294500"},{"lng":"109.003070300","lat":"34.473270100"},{"lng":"109.003072500","lat":"34.473245500"},{"lng":"109.003074700","lat":"34.473220900"},{"lng":"109.003076700","lat":"34.473196300"},{"lng":"109.003079000","lat":"34.473171700"},{"lng":"109.003081100","lat":"34.473148600"},{"lng":"109.003083300","lat":"34.473127200"},{"lng":"109.003085200","lat":"34.473105800"},{"lng":"109.003087400","lat":"34.473083800"},{"lng":"109.003089700","lat":"34.473061200"},{"lng":"109.003092000","lat":"34.473038100"},{"lng":"109.003094400","lat":"34.473014300"},{"lng":"109.003097000","lat":"34.472990200"},{"lng":"109.003099500","lat":"34.472965900"},{"lng":"109.003102000","lat":"34.472941200"},{"lng":"109.003104400","lat":"34.472916200"},{"lng":"109.003107000","lat":"34.472891600"},{"lng":"109.003109800","lat":"34.472867200"},{"lng":"109.003112100","lat":"34.472842800"},{"lng":"109.003114600","lat":"34.472817900"},{"lng":"109.003116900","lat":"34.472793000"},{"lng":"109.003119300","lat":"34.472768100"},{"lng":"109.003121600","lat":"34.472743200"},{"lng":"109.003124000","lat":"34.472718400"},{"lng":"109.003126500","lat":"34.472693500"},{"lng":"109.003128900","lat":"34.472668700"},{"lng":"109.003131500","lat":"34.472644100"},{"lng":"109.003133800","lat":"34.472620700"},{"lng":"109.003136000","lat":"34.472598200"},{"lng":"109.003138500","lat":"34.472575200"},{"lng":"109.003140900","lat":"34.472551900"},{"lng":"109.003143300","lat":"34.472528200"},{"lng":"109.003145900","lat":"34.472504500"},{"lng":"109.003148300","lat":"34.472482000"},{"lng":"109.003150700","lat":"34.472460900"},{"lng":"109.003152800","lat":"34.472439700"},{"lng":"109.003154100","lat":"34.472418600"},{"lng":"109.003154400","lat":"34.472398600"},{"lng":"109.003153800","lat":"34.472379600"},{"lng":"109.003152100","lat":"34.472360500"},{"lng":"109.003148700","lat":"34.472341800"},{"lng":"109.003143800","lat":"34.472324700"},{"lng":"109.003137400","lat":"34.472309100"},{"lng":"109.003129700","lat":"34.472293800"},{"lng":"109.003120100","lat":"34.472278300"},{"lng":"109.003108200","lat":"34.472263800"},{"lng":"109.003095600","lat":"34.472251000"},{"lng":"109.003082400","lat":"34.472240700"},{"lng":"109.003067900","lat":"34.472231600"},{"lng":"109.003051200","lat":"34.472223300"},{"lng":"109.003032500","lat":"34.472216300"},{"lng":"109.003011700","lat":"34.472210800"},{"lng":"109.002989300","lat":"34.472206500"},{"lng":"109.002965600","lat":"34.472203500"},{"lng":"109.002941100","lat":"34.472200900"},{"lng":"109.002915800","lat":"34.472198600"},{"lng":"109.002890100","lat":"34.472196700"},{"lng":"109.002864200","lat":"34.472194700"},{"lng":"109.002837900","lat":"34.472193000"},{"lng":"109.002811400","lat":"34.472190900"},{"lng":"109.002784600","lat":"34.472189000"},{"lng":"109.002757500","lat":"34.472187300"},{"lng":"109.002730100","lat":"34.472185400"},{"lng":"109.002702400","lat":"34.472183500"},{"lng":"109.002674700","lat":"34.472181700"},{"lng":"109.002647800","lat":"34.472180100"},{"lng":"109.002621700","lat":"34.472178400"},{"lng":"109.002595100","lat":"34.472176600"},{"lng":"109.002568500","lat":"34.472175000"},{"lng":"109.002541800","lat":"34.472173300"},{"lng":"109.002515100","lat":"34.472171600"},{"lng":"109.002488200","lat":"34.472169700"},{"lng":"109.002461700","lat":"34.472167800"},{"lng":"109.002435200","lat":"34.472165900"},{"lng":"109.002408700","lat":"34.472163900"},{"lng":"109.002382300","lat":"34.472161900"},{"lng":"109.002355900","lat":"34.472160000"},{"lng":"109.002329600","lat":"34.472158100"},{"lng":"109.002303400","lat":"34.472156100"},{"lng":"109.002277300","lat":"34.472154200"},{"lng":"109.002251300","lat":"34.472152300"},{"lng":"109.002225300","lat":"34.472150300"},{"lng":"109.002199400","lat":"34.472148500"},{"lng":"109.002173500","lat":"34.472146700"},{"lng":"109.002147600","lat":"34.472144900"},{"lng":"109.002121700","lat":"34.472142900"},{"lng":"109.002095800","lat":"34.472141100"},{"lng":"109.002069900","lat":"34.472139300"},{"lng":"109.002044100","lat":"34.472137500"},{"lng":"109.002018700","lat":"34.472135800"},{"lng":"109.001995200","lat":"34.472134100"},{"lng":"109.001973600","lat":"34.472132600"},{"lng":"109.001952400","lat":"34.472131500"},{"lng":"109.001930700","lat":"34.472130900"},{"lng":"109.001909300","lat":"34.472131000"},{"lng":"109.001887700","lat":"34.472132200"},{"lng":"109.001865600","lat":"34.472134600"},{"lng":"109.001843600","lat":"34.472138600"},{"lng":"109.001821900","lat":"34.472144000"},{"lng":"109.001800900","lat":"34.472151200"},{"lng":"109.001780600","lat":"34.472159700"},{"lng":"109.001761800","lat":"34.472169900"},{"lng":"109.001744600","lat":"34.472181100"},{"lng":"109.001729400","lat":"34.472193500"},{"lng":"109.001715900","lat":"34.472206800"},{"lng":"109.001704000","lat":"34.472220800"},{"lng":"109.001694000","lat":"34.472235400"},{"lng":"109.001685800","lat":"34.472250500"},{"lng":"109.001679500","lat":"34.472266000"},{"lng":"109.001675400","lat":"34.472280800"},{"lng":"109.001673000","lat":"34.472295000"},{"lng":"109.001670900","lat":"34.472309800"},{"lng":"109.001669000","lat":"34.472325500"},{"lng":"109.001667300","lat":"34.472341800"},{"lng":"109.001665400","lat":"34.472358800"},{"lng":"109.001663700","lat":"34.472376200"},{"lng":"109.001662000","lat":"34.472393900"},{"lng":"109.001660300","lat":"34.472411600"},{"lng":"109.001658700","lat":"34.472429200"},{"lng":"109.001656800","lat":"34.472446600"},{"lng":"109.001654900","lat":"34.472463800"},{"lng":"109.001653000","lat":"34.472481400"},{"lng":"109.001651000","lat":"34.472498700"},{"lng":"109.001649200","lat":"34.472514800"},{"lng":"109.001647600","lat":"34.472529600"},{"lng":"109.001646100","lat":"34.472544700"},{"lng":"109.001644600","lat":"34.472560000"},{"lng":"109.001643400","lat":"34.472574600"},{"lng":"109.001642400","lat":"34.472588100"},{"lng":"109.001641600","lat":"34.472601700"},{"lng":"109.001641700","lat":"34.472614600"},{"lng":"109.001642800","lat":"34.472627100"},{"lng":"109.001645100","lat":"34.472639500"},{"lng":"109.001648800","lat":"34.472651600"},{"lng":"109.001654100","lat":"34.472663200"},{"lng":"109.001660900","lat":"34.472674300"},{"lng":"109.001669200","lat":"34.472684600"},{"lng":"109.001678900","lat":"34.472694400"},{"lng":"109.001689900","lat":"34.472703500"},{"lng":"109.001701700","lat":"34.472712200"},{"lng":"109.001713600","lat":"34.472720700"},{"lng":"109.001725700","lat":"34.472729200"},{"lng":"109.001737800","lat":"34.472737900"},{"lng":"109.001749700","lat":"34.472746800"},{"lng":"109.001761100","lat":"34.472756300"},{"lng":"109.001771900","lat":"34.472766600"},{"lng":"109.001781600","lat":"34.472777500"},{"lng":"109.001789300","lat":"34.472788600"},{"lng":"109.001795100","lat":"34.472799000"},{"lng":"109.001799800","lat":"34.472809900"},{"lng":"109.001803300","lat":"34.472821500"},{"lng":"109.001805500","lat":"34.472832800"},{"lng":"109.001806800","lat":"34.472844600"},{"lng":"109.001807200","lat":"34.472856300"},{"lng":"109.001807000","lat":"34.472867100"},{"lng":"109.001806500","lat":"34.472876300"},{"lng":"109.001806100","lat":"34.472884700"},{"lng":"109.001805700","lat":"34.472893100"},{"lng":"109.001805200","lat":"34.472901300"},{"lng":"109.001804700","lat":"34.472908300"},{"lng":"109.001804200","lat":"34.472913600"},{"lng":"109.001803900","lat":"34.472917900"},{"lng":"109.001803500","lat":"34.472922100"},{"lng":"109.001803100","lat":"34.472926300"},{"lng":"109.001802700","lat":"34.472929400"},{"lng":"109.001802500","lat":"34.472931500"},{"lng":"109.001802400","lat":"34.472932300"},{"lng":"109.001802400","lat":"34.472932300"}]

    };
  },
  created() {},
  destroyed() {
    this.socket.close();
    clearInterval(this.realTimer);
  },
  mounted() {
    this.getVehiclesVin();
    lazyAMapApiLoaderInstance.load().then(() => {
      // 初始化地图
      this.mapInit();
      // 初始化信息窗体
      // this.initInfoWindow();
    });
    this.getConnectInfo();
  },

  methods: {
    //地图初始化
    mapInit() {
      this.map = new AMap.Map("container", {
        resizeEnable: true, // 窗口大小调整
        // eslint-disable-next-line no-undef
        center: this.center, // 地图中心点
        zoom: 10
      });
      this.map.addControl(
        new AMap.MapType({
          defaultType: 1 //0代表默认，1代表卫星
        })
      );
    },
    //获取车辆VIN
    getVehiclesVin() {
      inquireVehicle({}).then(response => {
        for (let item of response.data.vehicles) {
          this.vehicles.push(item.vin17);
        }
      });
    },
    //获取socket连接信息
    getConnectInfo() {
      getConnectInfo({}).then(response => {
        if (response.code == "200") {
          // this.socketPath =
          //   "ws://" + response.data.host + ":" + response.data.port;
          this.socketPath =
            "ws://" + "124.115.230.42" + ":" + "7151";
            // "ws://" + "172.16.8.91" + ":" + "7091";
          this.init();
        } else {
          Message({
            message: "获取socket连接信息失败",
            type: "error",
            duration: 2000
          });
        }
      });
    },
    //socket 初始化
    init: function() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.socketPath);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function() {
      //鉴权
      var sendData = JSON.stringify({
        actionName: "authorityReq",
        clientId: "",
        data: {}
      });
      this.socket.send(sendData);
    },
    error: function() {
      console.log("连接错误");
    },
    //解析socket返回值
    getMessage: function(msg) {
      const resultData = eval("(" + msg.data + ")");
      if (resultData.data.actionName == "authorityRsp") {
        var dataInfo = resultData;
        //鉴权成功
        if (dataInfo.code == "200") {
          this.clientID = dataInfo.data.clientId;
          console.log("鉴权成功");
          if (this.vehicles.length > 0) {
            //发送订阅数据
            var sendData = JSON.stringify({
              actionName: "subscribeReq",
              clientId: this.clientID,
              data: { vins: this.vehicles }
            });
            console.log(sendData);
            this.socket.send(sendData);
          }
        } else {
          //鉴权返回值有误
          console.log("鉴权失败");
          this.socket.onclose = this.close();
        }
      } else if (resultData.data.actionName == "subscribeGPSRsp") {
        console.log("GPS数据:");
        console.log(resultData.data.data);
        //GPS数据
        if (this.vehicleLocation.hasOwnProperty(resultData.data.data.vin)) {
          if (resultData.data.data.messageID == "512") {
            var vin = resultData.data.data.vin;
            this.vehicleLocation.vin = resultData.data.data.data.data[0];
          }
        } else {
          if (resultData.data.data.messageID == "512") {
            this.$set(
              this.vehicleLocation,
              resultData.data.data.vin,
              resultData.data.data.data.data[0]
            );
            this.createMarker(resultData.data.data.vin);
          }
        }

        //整车数据
        if (this.infoWindows.hasOwnProperty(resultData.data.data.vin)) {
          if (resultData.data.data.messageID == "520") {
            var vin = resultData.data.data.vin;
            this.infoWindows[vin] = resultData.data.data.data.data[0];
          }
        } else {
          if (resultData.data.data.messageID == "520") {
            this.$set(
              this.infoWindows,
              resultData.data.data.vin,
              resultData.data.data.data.data[0]
            );
          }
        }

        this.showCurrentMsg();
        this.showLookData();

        //更新marker实时位置
        this.sampleTime = resultData.data.data.data.timestamp;
        if (
          this.markerList.hasOwnProperty(resultData.data.data.vin) &&
          resultData.data.data.messageID == "512"
        ) {
          let pos = gps84ToGcj02(
            resultData.data.data.data.data[0].longitude,
            resultData.data.data.data.data[0].latitude
          );
          this.markerList[resultData.data.data.vin].setPosition(pos);
        }
      } else if (resultData.data.actionName == "subscribeRemoteRsp") {
        console.log("指令日志:");
        console.log(resultData.data.data);
      } else if (resultData.data.actionName == "subscribeTasksRsp") {
        console.log("看板数据:");
        console.log(resultData.data.data);
        this.jobNum = resultData.data.data.taskNum;
        this.jobCompletion = resultData.data.data.taskCompletionRate + "%";
      } else if (resultData.data.actionName == "subscribeStatusRsp") {
        console.log("下线数据:");
        console.log(resultData.data.data);
        if (
          this.vehicleLocation.hasOwnProperty(resultData.data.data.vin_17) ||
          this.infoWindows.hasOwnProperty(resultData.data.data.vin_17)
        ) {
          let vin17 = resultData.data.data.vin_17;
          this.$delete(this.vehicleLocation, resultData.data.data.vin_17);
          this.$delete(this.infoWindows, resultData.data.data.vin_17);
          // this.markerList[vin17].remove()
          this.map.remove(this.markerList[vin17]);
          this.showLookData();
        }
      }
    },
    //发送订阅数据
    send: function() {
      this.socket.send(params);
    },
    close: function() {
      console.log("socket已经关闭");
    },
    //创建marker
    createMarker(vin) {
      var that = this;
      var marker = new AMap.Marker({
        icon: markerIcon,
        position: [
          this.vehicleLocation[vin].longitude,
          this.vehicleLocation[vin].latitude
        ],
        map: that.map,
        extData: {
          id: vin
        }
      });

      // 点击事件
      marker.on("click", function(e) {
        that.selectedVehicle = e.target.w.extData.id;
        that.videoAudioChannel1(that.selectedVehicle);
        that.videoAudioChannel3(that.selectedVehicle);
        that.jobLookStatus = false;
        that.vehicleIconStatus = false;
        that.monitorStatus = true;
        that.handlePolygon();

        that.showInfo = true;
        let pos = gps84ToGcj02(
          that.vehicleLocation[vin].longitude,
          that.vehicleLocation[vin].latitude
        );
        that.map.setZoomAndCenter(16, pos); //设置地图中心点
        that.createInterval();
        // that.openInforWindow(vin)
      });

      marker.setTitle(vin); //设置车牌号作为车辆标识

      marker.setLabel({
        //修改label相对于maker的位置
        offset: new AMap.Pixel(-18, 32),
        content: vin
      });

      this.markerList[vin] = marker;
    },
    // 创建 infoWindow 实例
    initInfoWindow() {
      this.infoWindow = new AMap.InfoWindow({
        anchor: "bottom-center",
        autoMove: false,
        offset: new AMap.Pixel(10, -30),
        content: "" //传入 dom 对象，或者 html 字符串
      });
    },
    //打开信息窗体
    openInforWindow(vin) {
      this.showCurrentMsg();
      let content = [
        '<div style="padding: 5px;">',
        "<div>VIN : " + vin + "</div>",
        "<div>接收时间 : " + this.sampleTime + "</div>",
        "<div>速度 : " + this.speed + "(km/h)</div>",
        "<div>状态 : " + this.engineState + "</div>",
        "<div>行驶里程 : " + this.mileage + "</div>",
        "<div>经纬度 : " + this.longAndLat + "</div>",
        "<div></div>",
        "<button class='el-button' id='vehiclesInfo'>" +
          "车辆信息" +
          "</button>",
        "<button class='el-button'>" + "视频监控" + "</button>",
        "</div>"
      ];
      let pos = gps84ToGcj02(
        this.vehicleLocation[vin].longitude,
        this.vehicleLocation[vin].latitude
      );
      this.infoWindow.setContent(content.join(""));
      this.infoWindow.open(this.map, pos);
    },
    //退出监控
    exitMonitor() {
      this.map.setZoomAndCenter(10, [109.031066, 34.492126]); //设置地图中心点
      this.showVideos = false;
      this.showInfo = false;
      this.monitorStatus = false;
      this.jobLookStatus = true;
      this.vehicleIconStatus = true;
      clearInterval(this.realTimer);
    },

    //信息框数据
    showCurrentMsg() {
      let vin = this.selectedVehicle;
      if (
        this.vehicleLocation.hasOwnProperty(vin) &&
        this.infoWindows.hasOwnProperty(vin)
      ) {
        this.engineState = this.infoWindows[vin].vehicleStatus;
        if (this.engineState == 1) {
          this.engineState = "停车充电";
        } else if (this.engineState == 2) {
          this.engineState = "行驶充电";
        } else if (this.engineState == 3) {
          this.engineState = "未充电状态";
        } else if (this.engineState == 254) {
          this.engineState = "异常";
        } else if (this.engineState == 255) {
          this.engineState = "无效";
        }
        this.speed = this.infoWindows[vin].speed + "km/h";
        this.longAndLat =
          this.vehicleLocation[vin].longitude +
          "," +
          this.vehicleLocation[vin].latitude;
        this.mileage = this.infoWindows[vin].mileage + "km";
        this.regeocoder(
          this.vehicleLocation[vin].longitude,
          this.vehicleLocation[vin].latitude
        );
      }
    },
    //逆地理编码
    regeocoder(Lng, Lat) {
      let that = this;
      var lnglatXY = new AMap.LngLat(Lng, Lat);
      var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "base"
      });
      geocoder.getAddress(this.longAndLat, function(status, result) {
        if (status === "complete" && result.info === "OK") {
          that.address = result.regeocode.formattedAddress;
        }
      });
    },
    //轨迹显示
    trackShows() {
      let roadPath;
      if (this.selectedVehicle == "KK100001") {
        roadPath = this.carPath;
      } else {
        roadPath = this.sanitationPath;
      }
      // 绘制路线
      var polyline = new AMap.Polyline({
        path: roadPath,
        strokeColor: "#3366FF",
        strokeOpacity: 1,
        strokeWeight: 3,
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50
      });
      polyline.setMap(this.map);
    },
    //定时更新实时显示数据
    createInterval() {
      if (!this.realTimer) {
        this.realTimer = setInterval(this.showCurrentMsg, 3000);
      }
    },
    //看板数据
    showLookData() {
      let normalNum = 0;
      let totolSpeed = 0;
      let length = 0;
      for (let item in this.infoWindows) {
        if (this.infoWindows[item].speed > 0) {
          totolSpeed += parseFloat(this.infoWindows[item].speed);
          normalNum++;
        } else {
          this.markerList[item].setIcon(this.faultMarkerIcon);
        }
        length++;
      }
      this.jobVehicleNum = normalNum + "/" + length;
      this.jobSpeed = totolSpeed / length + "km/h";
    },
    //通道1
    videoAudioChannel1(vin) {
      this.playerOptions1.sources.src = 'rtmp://58.200.131.2:1935/livetv/hunantv';
      this.showVideos = true;
      // videoAudioRequest({
      //   dataType: 0,
      //   ip: "124.115.230.42",
      //   logicalChannel: 1,
      //   streamType: 1,
      //   tcpPort: 7201,
      //   udpPort: 7201,
      //   vin17: vin
      // }).then(response => {
      //   if (response.code == 200) {
      //     Message({
      //       message: "摄像1准备就绪",
      //       type: "success",
      //       duration: 2000
      //     });
      //     this.playerOptions1.sources.src = response.data[1];
      //     this.showVideos = true;
      //   } else {
      //     Message({
      //       message: "视频获取失败",
      //       type: "error",
      //       duration: 2000
      //     });
      //   }
      // });
    },
    //通道3
    videoAudioChannel3(vin) {
      this.playerOptions2.sources.src = 'rtmp://58.200.131.2:1935/livetv/cctv6';
      // videoAudioRequest({
      //   dataType: 0,
      //   ip: "124.115.230.42",
      //   logicalChannel: 3,
      //   streamType: 1,
      //   tcpPort: 7201,
      //   udpPort: 7201,
      //   vin17: vin
      // }).then(response => {
      //   if (response.code == 200) {
      //     Message({
      //       message: "摄像2准备就绪",
      //       type: "success",
      //       duration: 2000
      //     });
      //     this.playerOptions2.sources.src = response.data[3];
      //   } else {
      //     Message({
      //       message: "视频获取失败",
      //       type: "error",
      //       duration: 2000
      //     });
      //   }
      // });
    },
    //查询事件
    handleSearch() {
      if (this.vehicles.indexOf(this.searchVehicle) != -1) {
        if (this.vehicleLocation.hasOwnProperty(this.searchVehicle)) {
          this.selectedVehicle = this.searchVehicle;
          this.videoAudioChannel1(this.selectedVehicle);
          this.videoAudioChannel3(this.selectedVehicle);
          this.jobLookStatus = false;
          this.vehicleIconStatus = false;
          this.monitorStatus = true;
          this.showInfo = true;
          let pos = gps84ToGcj02(
            this.vehicleLocation[this.searchVehicle].longitude,
            this.vehicleLocation[this.searchVehicle].latitude
          );
          this.map.setZoomAndCenter(16, pos); //设置地图中心点
          this.createInterval();
        } else {
          Message({
            message: "该车不在线",
            type: "error",
            duration: 2000
          });
        }
      } else {
        Message({
          message: "无效车辆",
          type: "error",
          duration: 2000
        });
      }
    },

    //显示作业区域
    handlePolygon() {
        let polygonArr = new Array();
        let lnglat = new Array();
        // let savedPolygon = eval("(" + row[0].areaLocation + ")");
        let savedPolygon = this.jobArea;
        console.log(savedPolygon);
        for (let i = 0; i < savedPolygon.length; i++) {
          polygonArr.push(
            new AMap.LngLat(savedPolygon[i].lng, savedPolygon[i].lat)
          );
        }
        this.handlePolygon2(polygonArr)
        this.handlePolygon3()
    },
    handlePolygon2(polygonArr){
      let that = this;
      let polygon = new AMap.Polygon({
        map: that.map,
        path: polygonArr, //设置多边形边界路径
        strokeColor: "#0000ff", //线颜色
        strokeOpacity: 0.5, //线透明度
        strokeWeight: 5, //线宽
        fillColor: "#f5deb3", //填充色
        fillOpacity: 0.35, //填充透明度
      });
      console.log(polygonArr);
      this.map.setFitView()
    },
    //绘制线
    handlePolygon3() {
      let polygonArr = new Array();
        let lnglat = new Array();
        // let savedPolygon = eval("(" + row[0].areaLocation + ")");
        let savedPolygon = this.jobLine;
        console.log(this.jobLine);
        let newArr = [];
        for(let i = 0;i<savedPolygon.length;i++){
          let cnt = this.gps84ToGcj02(savedPolygon[i].lng,savedPolygon[i].lat)
          newArr.push({lng:cnt[0],lat:cnt[1]})
        }
        console.log(newArr)
        for (let i = 0; i < newArr.length; i++) {
          polygonArr.push(
            new AMap.LngLat(newArr[i].lng, newArr[i].lat)
          );
        }

      let polygon = new AMap.Polyline({
        map: this.map,
        path: polygonArr, 
        outlineColor: "red",

        strokeColor: "red",

        strokeOpacity: 0.6,

        strokeWeight: 4,

        borderWeight: 1,

        strokeStyle: "solid",

        strokeDasharray: [0, 0, 0],

        lineJoin: "round",

        lineCap: "round",

        zIndex: 20,
      });

      this.map.setFitView();
    },


    //gps84坐标系 to 火星坐标系 (GCJ-02)
   gps84ToGcj02: function (lng, lat) {
       var that = this;

       lng = parseFloat(lng);
       lat = parseFloat(lat);
       var EARTH_RADIUS = 6378137;
       var EE = 0.00669342162296594323;

       var dLat = that.transformLat(lng - 105.0, lat - 35.0);
       var dLng = that.transformLon(lng - 105.0, lat - 35.0);
       var radLat = lat / 180.0 * Math.PI;
       var magic = Math.sin(radLat);
       magic = 1 - EE * magic * magic;
       var sqrtMagic = Math.sqrt(magic);
       dLat = (dLat * 180.0) / ((EARTH_RADIUS * (1 - EE)) / (magic * sqrtMagic) * Math.PI);
       dLng = (dLng * 180.0) / (EARTH_RADIUS / sqrtMagic * Math.cos(radLat) * Math.PI);
       var mgLat = lat + dLat;
       var mgLng = lng + dLng;

       return [mgLng+0.0000461249, mgLat+0.0000311758];
       //return [mgLng.toFixed(6)+0.0000461249, mgLat.toFixed(6)+0.0000311758];
   },
   transformLat: function (x, y) {
       var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
       ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
       ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
       ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
       return ret;
   },
   transformLon: function (x, y) {
       var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
       ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
       ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
       ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
       return ret;
   },
  }
};
</script>
<style scoped>
.controls {
  position: absolute;
  left: 6px;
  top: 6px;
}
.videoPlays {
  position: absolute;
  right: 6px;
  top: 15%;
}
.info {
  position: absolute;
  right: 6px;
  top: 0;
}
.marker-style {
  height: 10px;
  width: 10px;
}
.info-window-content {
  position: relative;
  width: 220px;
}

.button-close {
  position: absolute;
  right: 0.5em;
  top: 0.5em;

  cursor: pointer;
}
.box-card {
  width: 360px;
  background-color: #ffffffb2;
}
.job-look {
  width: 200px;
  position: absolute;
  right: 6px;
  top: 1%;
  background-color: #ffffff5e;
}
.vehicle-icon {
  width: 150px;
  height: 100px;
  position: absolute;
  right: 220px;
  top: 1%;
  background-color: #ffffff5e;
}
.hhh {
  padding-bottom: 10px;
}
.font-style {
  font-size: 14px;
}
.el-divider--horizontal {
  margin: 8px 0;
  background: 0 0;
  border-top: 1px dashed #e8eaec;
}
.input-search {
  position: absolute;
  width: 200px;
  top: 1%;
  left: 20px;
}
.exit-bottom {
  position: absolute;
  left: 230px;
  top: 1%;
}
.el-button {
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #409eff;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}
</style>
